<template>
	<view :style="`padding-bottom: ${TabbarHeight * 2}px;`">
		<view class="header flex flex-column flex-x-space-between">
			<view :style="`padding-top:${statusBarHeight + 10}px;`">
				<!-- <view class="flex flex-y-center ml-20">
					<image src="@/static/icon/qd.png" class="w-26 h-26"></image>
					<view class="fs-14 fw-600 ml-4">
						<text>已连续打卡</text>
						<text class="fs-17 text-blue-1">{{USERINFO?.continuous||0}}</text>
						<text>天</text>
					</view>
				</view> -->
				<view class="flex flex-y-center ml-13 position-relative" @click="$page.open('/pages/user/sign')">
					<view class="w-5 h-5 rounded-circle bg-red-1 position-absolute left-20 top-4"
						v-if="!USERINFO?.sign"></view>
					<image src="@/static/icon/index/dkqd.png" class="w-26 h-26"></image>
					<text class="fs-14 fw-600 ml-4" v-if="USERINFO?.sign==false">未打卡</text>
					<view class="fs-14 fw-600 ml-4" v-else>
						<text>已连续打卡</text>
						<text class="fs-17 text-blue-1">{{USERINFO?.continuous||0}}</text>
						<text>天</text>
					</view>
				</view>
			</view>
			<view class="px-16 pt-20">
				<view class="flex flex-x-space-between flex-y-center" v-if="USERINFO?.id">
					<view class="flex flex-y-center">
						<image :src="USERINFO?.avatar" class="w-60 h-60 rounded-circle"></image>
						<view class="ml-8 flex flex-column">
							<view class="flex flex-y-center">
								<text class="fs-17 fw-600">{{USERINFO?.nickname}}</text>
								<image src="@/static/icon/vip.png" class="w-33 h-14 ml-4" v-if="USERINFO?.is_vip=='1'">
								</image>
								<image src="@/static/icon/vip_h.png" class="w-33 h-14 ml-4" v-else>
								</image>
							</view>
							<view class="flex mt-8 flex-y-center" @click="openClass()">
								<!-- <text class="text-grey-3 fs-15">我的积分:</text> -->
								<!-- <text class="text-blue-1 ml-6 fw-500">{{USERINFO?.integral}}</text> -->
								<!-- <view class="flex flex-y-center"> -->
								<text>{{category}}</text>
								<image src="@/static/icon/qh.png" class="w-14 h-14 ml-8"></image>
								<!-- </view> -->
							</view>
						</view>
					</view>
					<image src="@/static/icon/sz.png" class="w-24 h-24" @click="$page.open('/pages/user/detail')">
					</image>
				</view>
				<view v-else class="flex  flex-y-center" @click="login()">
					<image :src="WEBCONFIG?.nl" class="w-60 h-60 rounded-circle"></image>
					<view class="ml-8 flex flex-column">
						<view class="flex flex-y-center">
							<text class="fs-17 fw-600">请登录</text>
						</view>
						<view class="flex mt-8 flex-y-center">
							<text class="text-grey-3 fs-15">点击登录</text>
						</view>
					</view>
				</view>
			</view>

			<view class="p-12">
				<view class="tk c-img w-p-100 box-sizing py-10 px-15 flex flex-x-space-between flex-y-center"
					:style="`background-image:url('${WEBCONFIG?.hybg}') ;`">
					<view class="flex flex-column ml-50" @click="openPackage">
						<text class="tksx block fs-18 fw-600">{{USERINFO?.is_vip!='1'?'题库激活':'题库已激活'}}</text>
						<text class=" fs-13 mt-2"
							style="color: #FFF2DE;">{{USERINFO?.is_vip==2?'海量题库免费刷~':USERINFO?.vip_time}}</text>
					</view>
					<view class="flex flex-y-center" @click="openPackage">
						<text class="fs-14" style="color: #FFF2DE;">{{USERINFO?.is_vip!='1'?'立即开通':'立即续费'}}</text>
						<uv-icon name="arrow-right" color="#FFF2DE"></uv-icon>
					</view>
				</view>
			</view>
			
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="WEBCONFIG?.weixin_banner_status && WEBCONFIG?.weixin_banner_status == 1" class="w-p-100">
				<ad :unit-id="WEBCONFIG?.weixin_banner_ad_id" ad-theme="white"></ad>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="w-p-100" v-if="WEBCONFIG?.douyin_banner_status && WEBCONFIG?.douyin_banner_status == 1">
				<ad :unit-id="WEBCONFIG?.douyin_banner_ad_id" ad-theme="white"></ad>
			</view>
			<!-- #endif -->

			<view class="px-12">
				<view class="bg-white rounded-8 p-15 flex flex-wrap">
					<view class="flex flex-column flex-center w-p-25 mb-10" v-for="(item,index) in navList" :key="index"
						@click="$page.open(item.page)">
						<image :src="WEBCONFIG?.[item.icon]" class="w-46 h-46 rounded-circle"></image>
						<view class="fs-14 text-grey-3 mt-8">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="px-12 fs-16 mt-10">
			<view class="bg-white rounded-8">
				<view v-for="(item,index) in tabsList" :key="index" @click="onClick(item)">

					<button class="btn-normal" v-if="item.type==5" open-type="share">
						<view class="p-15 flex flex-x-space-between">
							<view class="flex flex-y-center">
								<image :src="item.image" class="w-24 h-24"></image>
								<text class="ml-8">{{item.name}}</text>
							</view>
							<uv-icon name='arrow-right'></uv-icon>
						</view>
					</button>

					<view class="p-15 flex flex-x-space-between" v-else>
						<view class="flex flex-y-center">
							<image :src="item.image" class="w-24 h-24"></image>
							<text class="ml-8">{{item.name}}</text>
						</view>
						<uv-icon name='arrow-right'></uv-icon>
					</view>
				</view>
			</view>
		</view>


		<view class="px-12 fs-16 mt-12">
			<view class="bg-white rounded-8">
				<view class="p-15 " v-for="(item,index) in tabsList1" :key="index">
					<button class='btn-normal' v-if="item.type==8&&WEBCONFIG?.douyin_im_status=='1'" open-type="im"
						:data-im-id="WEBCONFIG?.douyin_im_id" @error="imErr" @click="onClick(item)">
						<view class="flex flex-x-space-between">
							<view class="flex flex-y-center">
								<image :src="item.image" class="w-24 h-24"></image>
								<text class="ml-8">{{item.name}}</text>
							</view>
							<uv-icon name='arrow-right' v-if="item.type!=9"></uv-icon>
							<text v-else class="text-grey-4 fs-14">{{WEBCONFIG?.customer_mobile}}</text>
						</view>
					</button>

					<view class="flex flex-x-space-between" v-else @click="onClick(item)">
						<view class="flex flex-y-center">
							<image :src="item.image" class="w-24 h-24"></image>
							<text class="ml-8">{{item.name}}</text>
						</view>
						<uv-icon name='arrow-right' v-if="item.type!=9"></uv-icon>
						<text v-else class="text-grey-4 fs-14">{{WEBCONFIG?.customer_mobile}}</text>
					</view>
				</view>
			</view>
			
		<!-- #ifdef MP-WEIXIN -->
			<view v-if="WEBCONFIG?.weixin_video_status && WEBCONFIG?.weixin_video_status == 1">
				<ad :unit-id="WEBCONFIG?.weixin_video_ad_id" ad-theme="white"></ad>
			</view>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
			<view class="ad" v-if="WEBCONFIG?.douyin_video_status && WEBCONFIG?.douyin_video_status == 1">
				<ad :unit-id="WEBCONFIG?.douyin_video_ad_id" ad-theme="white"></ad>
			</view>
		<!-- #endif -->
		</view>

		<uv-popup ref="popup" :safeAreaInsetBottom='false'>
			<y-user @close="close()"></y-user>
		</uv-popup>


		<uv-popup ref='popupCustomer' round='20rpx'>
			<view class="rounded-12 bg-white py-20  " style="padding-left: 116rpx;padding-right: 116rpx;">
				<view class="text-center fs-16 fw-600">联系客服</view>
				<view class="py-20">
					<image class="w-180" mode="widthFix" :src="WEBCONFIG?.customer_qrcode" show-menu-by-longpress>
					</image>
				</view>
				<view class="text-center fs-17 ">长按保存图片</view>
			</view>
		</uv-popup>


		<uv-popup ref="popupClass" bg-color="#fff" :overlay="false">
			<y-classification :status="status" @close="closeClassification" :list='list'></y-classification>
		</uv-popup>


		<uv-popup ref="popupUser" bg-color="#fff" overlay round="10">
			<y-login @close="closeUser()" :TabbarHeight="TabbarHeight"></y-login>
		</uv-popup>

		<y-tabbar v-if="!status"></y-tabbar>
	</view>
</template>

<script setup>
	import { ref, reactive } from "vue";
	import { useWebConfigStore, useRefs, useUserStore } from "@/stores/index";
	import { onShow, onShareAppMessage, onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app"
	import { $http, $page, $tool, useStorage } from "@/utils";
	import system from "@/utils/system";
	import { $interstitialAd} from '@/utils/ad'
	const popup = ref()
	const popupCustomer = ref()
	const popupC = ref()
	const category = ref()
	const status = ref(false)
	const popupClass = ref(null)
	const popupUser = ref()
	const TabbarHeight = ref(0)
	const navList = ref([
		{ name: '考试记录', page: '/pages/testPaper/record', 'icon': 'xz' },
		{ name: '试卷列表', page: '/pages/testPaper/list', 'icon': 'stsj' },
		{ name: '积分商城', page: '/pages/shop/goods', 'icon': 'wdsc' },
		{ name: '购买记录', page: '/pages/package/order', 'icon': 'gmjl' },
	])
	const tabsList = reactive([
		{ name: '地址管理', image: '/static/icon/user/dzgl.png', type: 1 },
		{ name: '试题报错', image: '/static/icon/user/stbc.png', type: 2 },
		{ name: '收藏题目', image: '/static/icon/user/sctm.png', type: 3 },
		{ name: '刷题记录', image: '/static/icon/user/stjl.png', type: 4 },
		{ name: '分享有礼', image: '/static/icon/user/fxyl.png', type: 5 },
		{ name: '我的错题', image: '/static/icon/user/wdct.png', type: 6 },
		{ name: '我的证书', image: '/static/icon/user/zs.png', type: 11 },
	])
	const tabsList1 = reactive([
		// { name: '消息中心', image: '/static/icon/user/xxzx.png', type: 6 },
		{ name: '意见反馈', image: '/static/icon/user/yjfk.png', type: 7 },
		{ name: '在线客服', image: '/static/icon/user/zxkf.png', type: 8 },
		{ name: '电话客服', image: '/static/icon/user/dhkf.png', type: 9 },
		{ name: '关于我们', image: '/static/icon/user/gywm.png', type: 10 },
	])


	// #ifndef H5
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	// #endif

	// #ifdef H5
	const statusBarHeight = 10
	// #endif


	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const { USERINFO } = useRefs(useUserStore());
	const list = ref([])
	onShareAppMessage(() => {
		let id = USERINFO.value.id || 0
		return {
			title: WEBCONFIG.value?.share_title || WEBCONFIG.value?.web_name || '',
			path: 'pages/index/index?id=' + id,
			imageUrl: WEBCONFIG.value?.share_image || ''
		}
	})


	onLoad(() => {
		category.value = useStorage().get('CATEGORYNAME')
		getList()
		if (WEBCONFIG.value?.custom_tabbar == 1) {
			TabbarHeight.value = 50 + uni.getSystemInfoSync().safeAreaInsets.bottom
		} else {
			TabbarHeight.value = 20
		}
		// #ifdef MP||MP-TOUTIAO
		if (WEBCONFIG.value?.weixin_interstitial_status == '1') {
			$interstitialAd.init(WEBCONFIG.value?.weixin_interstitial_ad_id)
			$interstitialAd.show()
		}
		// #endif
	})
	onShow(() => {
		if (useUserStore().isLogin()) {
			getUser()
		}
	})
	const getList = () => {
		$http.get('Category/getClassification').then(res => {
			list.value = res.data
		})
	}

	const openPackage = () => {
		// #ifdef H5
		$page.open('/pages/package/package');
		return;
		// #endif
		if (uni.getSystemInfoSync().platform == 'ios' && WEBCONFIG?.value.ios_pay == '2') {
			activation()
		} else {
			$page.open('/pages/package/package')
		}
	}

	const closeClassification = (e) => {
		status.value = false
		category.value = e.name
		popupClass.value.close()
		getUser()
	}

	const getUser = () => {
		let id = useStorage().get('CATEGORY')
		$http.get('User/getUser', { classification_id: id }).then(res => {
			USERINFO.value = res.data
			useUserStore().setUserInfo(USERINFO.value)
		})
	}

	const onClick = (e) => {
		if (!useUserStore().isLogin()) {
			$tool.toast('请先登录');
			return;
		}
		if (e.type == 1) {
			$page.open('/pages/address/index')
		}
		if (e.type == 2) {
			$page.open('/pages/user/fdrecord')
		}
		if (e.type == 3) {
			$page.open('/pages/topic/topic?type=4')
		}

		if (e.type == 4) {
			$page.open('/pages/topic/topic?type=6')
		}
		
		
		if (e.type == 6) {
			$page.open('/pages/topic/topic?type=3')
		}
		
		if (e.type == 7) {
			$page.open('/pages/user/feedback')
		}
		if (e.type == 8) {
			openCustomer()
		}

		if (e.type == 9) {
			uni.makePhoneCall({
				phoneNumber: WEBCONFIG.value.customer_mobile
			})
		}
		if (e.type == 10) {
			$page.open('/pages/tag/tag?name=about')
		}
		if (e.type == 11) {
			$page.open('/pages/user/cert')
		}
	}


	//登录
	const login = () => {
		popupUser.value.open('bottom')
	}

	const imErr = (e) => {
		$tool.toast('打开客服失败')
	}
	//卡密激活
	const activation = () => {
		uni.showModal({
			title: '卡密兑换',
			editable: true,
			placeholderText: '请输入卡密',
			success(e) {
				if (e.confirm) {
					if (e.content) {
						$http.post('Cdkey/validateCdkey', { code: e.content }).then(res => {
							$tool.toast('使用成功');
							getUser()
						})
					}
				}
			}
		})
	}



	//打开客服
	const openCustomer = () => {
		// #ifdef H5
		popupCustomer.value.open('center')
		return
		// #endif

		// #ifdef MP-TOUTIAO
		if (WEBCONFIG.value.douyin_im_status == '2') {
			popupCustomer.value.open('center')
		}
		// #endif

		// #ifdef MP-WEIXIN
		if (WEBCONFIG.value.customer_status == '1') {
			popupCustomer.value.open('center')
		} else {
			wx.openCustomerServiceChat({
				extInfo: {
					url: WEBCONFIG.value.customer_url
				},
				corpId: WEBCONFIG.value.customer_corpId, //必须和你小程序上的一致
				success(res) {
					console.log(res, 1)
				},
				fail(res) {
					console.log(res, 2)
				},
			})
		}
		// #endif
	}
	const openC = () => {
		popupC.value.open('center')
		getList()
	}
	const open = () => {
		popup.value.open('bottom')
	}
	const close = () => {
		popup.value.close()
	}
	const openClass = () => {
		status.value = true
		popupClass.value.open('center')
	}
	const closeUser = () => {
		$tool.toast('登录成功')
		popupUser.value.close()
	}
</script>

<style scoped lang="scss">
	.header {
		// height: 750rpx;
		/* background: radial-gradient(circle at 15% -20%, #78DDFF 0%, transparent 35%); */
		background: radial-gradient(300% 100% at 0% 15%, rgba(120, 221, 255, 0.3) 0%, rgba(255, 230, 233, 0) 35%, rgba(255, 238, 240, 0) 100%);
		background-repeat: no-repeat;
		background-position: top center;
	}

	.w-126 {
		width: 252rpx;
	}

	.h-86 {
		height: 172rpx;
	}

	.tk {
		height: 114rpx;

		.tksx {
			background-clip: text;
			background: linear-gradient(to right, #FFFFEA -5%, #E4BA83 30%, #E9C88A 50%, #F4DDAF 80%, #C79A68 100%);
			color: transparent;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.line {
		width: 1rpx;
		height: 140rpx;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 49%, rgba(0, 0, 0, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.wdks {
		width: 676rpx;
		height: 268rpx;
	}

	.other {
		width: 332rpx;
		height: 126rpx;
	}
</style>